<!-- 登陆页 -->
<template>
    <view class="login_main">
        <view class="titleBox">
            <image class="logo" src="@/assets/images/index/login/logo.png"></image> <!-- logo -->
        </view>
        <view class="login_form">
            <view class="mt"></view>
            <nut-form :model-value="loginForm" class="form">
                <!-- 账号 -->
                <nut-form-item>
                    <nut-input v-model="loginForm.staffNo" placeholder="输入值班员工号" :clearable="true">
                        <template #left>
                            <!-- <My2 /> -->
                            <image class="userIcon" src="@/assets/images/user/user_2_line.png" />
                        </template>
                    </nut-input>
                </nut-form-item>
                <!-- 密码 -->
                <nut-form-item>
                    <nut-input v-model="loginForm.password" placeholder="请输入密码" type="password" v-if="isPassword">
                        <template #left>
                            <!-- <Issue /> -->
                            <image class="userIcon" src="@/assets/images/user/lock_line.png" />
                        </template>
                        <template #right>
                            <Marshalling @click="isPassword = false" />
                        </template>
                    </nut-input>
                    <!-- 明文 -->
                    <nut-input v-model="loginForm.password" placeholder="请输入密码" v-else>
                        <template #left>
                            <!-- <Issue /> -->
                            <image class="userIcon" src="@/assets/images/user/lock_line.png" />
                        </template>
                        <template #right>
                            <Eye @click="isPassword = true" />
                        </template>
                    </nut-input>
                </nut-form-item>
            </nut-form>
            <nut-checkbox v-model="check" label="记住账号">记住账号</nut-checkbox>
            <nut-button size="large" class="button" type="info" @click="logining">登录</nut-button>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { workLogin } from '@/@api/home';
import { Eye, Issue, Marshalling, My2 } from '@nutui/icons-vue-taro';
import { Toast } from '@nutui/nutui-taro';
import { ref, toRef } from 'vue';
import useUserStore from '@/store/user';
import Taro, { useReady, useRouter } from '@tarojs/taro';
// 路由
const router = useRouter()
// pinia
const userStore = useUserStore()
// 页面初始化生命周期钩子
useReady(() => {
    // 头部的标题
    Taro.setNavigationBarTitle({
        title: '请登录'
    })
    // 头部的样式
    Taro.setNavigationBarColor({
        // 字体的颜色
        frontColor: '#000000',
        // 背景颜色
        backgroundColor: '#f4f5f6',
        // 动画
        animation: {
            duration: 400,
            timingFunc: 'easeIn'
        }
    });
})
// 是否记住账号
const check = ref(true)
// 是否是密文
const isPassword = ref(true)
// 表单的数据
const loginForm = ref({
    staffNo: Taro.getStorageSync('remember') || "G1999100026",
    companyNo: "00001",
    btssId: 2,
    needVerify: false,
    password: "000000",
})
// 登录
async function logining() {
    // 是否输入账号密码
    if (loginForm.value.staffNo && loginForm.value.password) {
        loginForm.value.companyNo = loginForm.value.staffNo;
        const res = await workLogin(loginForm.value)
        // 登录成功
        if (res.data.code == 200) {
            console.log(res.data.data)
            // 将用户的信息存入pinia
            userStore.token = res.data.data.access_token
            userStore.btStaff = res.data.data.btStaff
            userStore.btsId = res.data.data.btsId
            Taro.setStorageSync('token', res.data.data.access_token)
            Taro.setStorageSync('btStaff', res.data.data.btStaff)
            Taro.setStorageSync('btsId', res.data.data.btsId)
            // 登录成功后弹窗
            Taro.showToast({
                icon: 'success',
                title: '登录成功',
                success: () => {
                    console.log("login success", router.params.redirected)
                    Taro.reLaunch({
                        url: router.params.redirected && router.params.redirected != '/' ? router.params.redirected : '/pages3/index/index'
                    })
                }
            })

            // 记住账号
            console.log(check.value, '====记住');
            if (check.value) {
                Taro.setStorageSync('remember', loginForm.value.staffNo)
            }

            //结束
        } else {
            // 登录失败后弹窗
            Taro.showToast({
                icon: 'error',
                title: res.data.msg
            })
        }
    } else {
        // 信息不完善弹窗
        Taro.showToast({
            icon: 'error',
            title: "请完善信息"
        })
    }
}

</script>

<style lang="scss">
.login_main {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    // padding-top: 120rpx;
    background-color: #f4f5f6;

    .titleBox {
        font-size: 24rpx;
        // line-height: 32rpx;
        // padding-left: 64rpx;
        padding: 120rpx 0rpx;
        // color: #999999;

        // .titleBig {
        //     font-size: 44rpx;
        //     line-height: 60rpx;
        //     color: #252525;
        //     font-weight: 700;
        //     margin-bottom: 16rpx;
        // }
        .logo {
            width: 200rpx;
            height: 200rpx;
            margin: 0 274rpx;
        }
    }

    .login_form {
        background-color: #ffffff;
        height: 752rpx;
        // border-radius: 15%;
        border-top-left-radius: 50rpx; //左上角
        border-top-right-radius: 50rpx; //右上角

        .mt {
            height: 30rpx;
        }

        .form {
            .nut-input {
                width: 600rpx;
                margin: 0rpx 64rpx;
                color: #252525;

                // padding-left: 10rpx;
                .userIcon {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 20rpx;
                }
            }

        }

        .button {
            width: 670rpx;
            height: 88rpx;
            color: #fff;
            font-size: 32rpx;
            background-color: #0966FF;
            margin: 44rpx 0 0 40rpx;
        }

        .nut-checkbox {
            margin-left: 90rpx;
        }
    }


    // .logo {
    //     position: fixed;
    //     bottom: 116rpx;

    //     image {
    //         height: 112rpx;
    //         width: 244rpx;
    //         margin-left: 252rpx;
    //     }
    // }


}
</style>
